<template>
	<view class="container">
		<navbar></navbar>

		<view class="main">
			<!-- <view class="topTitle">
				{{price}}能量抽一次
			</view> -->
			<view class="" style="bottom: 10rpx;color: #fff;" >
			拥有{{goods_count}}个《{{goods_name}}》</view>
			<view class="box">
				<view class="canvas-container">
					<view :animation="animationData" class="canvas-content">
						<view class="canvas-line">
							<view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1"
								:style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
						</view>
						<view class="canvas-list">
							<view class="canvas-item" v-for="(iteml,index2) in awardsList" :key="index2">
								<view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
									<text
										style="width: 150rpx;height: 70rpx;font-size: 28rpx;color: #865C1B;overflow: hidden;">{{iteml.award}}</text>
									<image class="canvas-item-text-img" :src="iteml.img_url"></image>
								</view>
							</view>
						</view>
					</view>
					<view @tap="getjadeLuckyDraw" v-if="active_state == 1" class="canvas-btn"
						v-bind:class="btnDisabled">抽奖</view>
					<view class="canvas-btn disabled" v-if="active_state == 2">未开始</view>
					<view class="canvas-btn disabled" v-if="active_state == 3" v-bind:class="btnDisabled">已结束</view>
					
					<!-- <view class="canvas-btn-table">拥有{{goods_count}}个《{{goods_name}}》</view> -->
					
				</view>
			</view>
			<view class="rightNav" @click="nav_Prize">
				我的奖品
			</view>
		</view>
		<view class="text">
			<view class="title">
				<!-- <view class="left"></view> -->
				<view class="p">
					活动规则
				</view>
				<!-- <view class="right"></view> -->
			</view>
			<view style="margin-top: 80rpx;">
				<mp-html :content="html"></mp-html>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		<l-barrage v-show="isBarrage" ref="lBarrage" @end="barrage"></l-barrage>
		<view class="zz" v-show="isPop">
			<view class="popup">
				<view class="img">
					<img :src="img_url" alt="">
				</view>
				<view class="bottom">
					<view class="title" v-if="error">
						<!-- <view style="color: #f00; width: 200rpx;" class="oneOver">恭喜您，获得{{name}}</view> -->
						<view style="color: #999; width: 250rpx;" class="oneOver"></view>
						<view style="margin-top: 20rpx;">
							谢谢惠顾
						</view>
					</view>
					<view class="title" v-else>
						<!-- <view style="color: #f00; width: 200rpx;" class="oneOver">恭喜您，获得{{name}}</view> -->
						<view style="color: #f00; width: 250rpx;" class="oneOver">恭喜您中奖啦~</view>
						<view style="margin-top: 20rpx;">
							抽中奖品可在<text style="color: #DAA951;">我的奖品</text>中查看
						</view>
					
					</view>
					<view class="btn">
						<view class="return" @click="isPop = false">知道了</view>
						<view class="continue" @click="getjadeLuckyDraw">再抽一次</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import lBarrage from '@/components/l-barrage/l-barrage.vue'
	export default {
		components: {
			lBarrage
		},
		data() {
			return {
				goods_count: 0,
				goods_name: '',
				awardsConfig: {
					chance: true,
					awards: []
				},
				awardsList: {},
				animationData: {},
				btnDisabled: '',
				chishu: 10, //用户能量
				price: 0, //抽取一次
				l_id: 0, //活动id
				isPop: false, //popup弹窗
				img_url: '', //中奖图片
				name: '苹果手机', //中奖名字
				html: '', //活动规则
				active_state: 1, //活动状态 1--开始 2--未开始 3--已结束
				isBarrage: true,
				resPRinfo:0,
			};
		},
		onLoad(e) {
			// uni.setNavigationBarColor({
			// 	frontColor: '#ffffff',
			// 	backgroundColor: '#A83FDB',
			// 	animation: {
			// 		duration: 400,
			// 		timingFunc: 'easeIn'
			// 	}
			// })
			console.log(e)
			this.l_id = e.l_id
			this.getJadeLotteryDetails()
			this.$nextTick(() => {
				this.getJadeLotteryWinningList()
			})

		},
		onReady(e) {


			//分享  
			uni.showShareMenu({
				withShareTicket: true
			});
		},
		//下拉刷新
		onPullDownRefresh(e) {
			this.getJadeLotteryDetails(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			//我的奖品
			nav_Prize() {
				uni.navigateTo({
					url: `/pages/user/integral/myPrize?l_id=${this.l_id}`
				})
			},
			//奖品列表
			getJadeLotteryDetails() {
				let _this = this
				app._post_form('Jadegoods/getJadeLotteryDetails', {
					l_id: _this.l_id
				}, function(result) {
					console.log(result.data)
					if (1 == result.code) {
						_this.awardsConfig.awards = result.data.sku_info
						_this.price = result.data.price
						_this.active_state = result.data.active_state
						_this.chishu = result.data.user_points
						_this.resPRinfo = result.data.resPRinfo
						_this.goods_name = result.data.goods_name
						_this.goods_count = result.data.goods_count
						_this.html = _this.escape2Html(result.data.content)
						console.log(_this.awardsConfig)
						_this.drawAwardRoundel();
					}
				}, null, function() {
					// 解除按钮禁用
					uni.stopPullDownRefresh();
					app.showError(result.msg);

				});
			},
			//中奖
			getjadeLuckyDraw() {

				this.isPop = false
				let _this = this
				uni.showModal({
					title: "提示",
					content: "是否消耗一个《" + _this.goods_name  + "》进行抽奖？",
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if(res.confirm) { 
							app._post_form('Jadegoods/jadeLuckyDraw', {
								l_id: _this.l_id
							}, function(result) {
								if (1 == result.code) {
									var i = result.data.l_sku_id
									var e
									_this.img_url = result.data.img_url
									_this.name = result.data.name
									_this.awardsList.forEach((item, index) => {
										if (item.l_sku_id == i) {
											e = index
										}
									})
									_this.chishu = result.data.user_points
									_this.resPRinfo = result.data.resPRinfo
									console.log(result.data)
									_this.playReward(e)
								}
							}, null, function() {
								// 解除按钮禁用
								app.showError(result.msg);
							});
						}
					}
				})
				
			},
			//弹幕列表
			getJadeLotteryWinningList() {
				let _this = this
				app._post_form('Jadegoods/getJadeLotteryWinningList', {
					l_id: _this.l_id
				}, function(result) {
					if (1 == result.code) {

						let i = []
						let a = result.data.list
						console.log(a)
						a.forEach((item) => {
							i.push(item.show_text)
						})
						_this.$refs.lBarrage.start(i)
					}
				}, null, function() {
					// 解除按钮禁用
					// app.showError(result.msg);
				});
			},

			//弹幕回调
			barrage() {
				console.log("一轮结束,再来一波");
				this.getJadeLotteryDetails()
				this.getJadeLotteryWinningList()
			},
			//画抽奖圆盘  
			drawAwardRoundel() {
				var awards = this.awardsConfig.awards;
				var awardsList = [];
				var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  

				// 奖项列表  
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg',
						lineTurn: i * turnNum + turnNum / 2 + 'deg',
						award: awards[i].name,
						img_url: awards[i].img_url,
						l_sku_id: awards[i].l_sku_id
					});
				}

				this.btnDisabled = this.awardsConfig.chance ? '' : 'disabled';
				this.awardsList = awardsList;
				console.log(this.awardsList)
			},

			//发起抽奖  
			playReward(e) {
				if (this.chishu == 0 && this.resPRinfo == 0) {
					uni.showToast({
						title: '抽奖次数已经用完',
						icon: 'none'
					})
					return
				}
				this.isBarrage = false
				let _this = this
				//中奖index  
				var awardsNum = this.awardsConfig.awards;
				// var awardIndex = Math.round(Math.random() * (awardsNum.length - 1)); //随机数  
				var awardIndex = e; //中奖索引  
				var runNum = 8; //旋转8周  
				var duration = 8000; //时长  

				// 旋转角度  
				this.runDeg = this.runDeg || 0;
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum
					.length))
				//创建动画  
				var animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease'
				})
				animationRun.rotate(this.runDeg).step();
				this.animationData = animationRun.export();
				this.btnDisabled = 'disabled';

				// 中奖提示  

				setTimeout(function() {
					if(_this.name == '谢谢惠顾'){
						_this.error=true
					}else{
						_this.error=false
					}
					this.isPop = true
					this.btnDisabled = '';
					this.isBarrage = true
				}.bind(this), duration);

			}
		}

	}
</script>

<style lang="less" scoped>
	page {
		// background: #F9AD2E;
		background-image: linear-gradient(#110F2F, #2A193C, #351C43);
	}

	.main {
		padding-top: 100rpx;
		padding-bottom: 100rpx;
		color: #8A6115;
		text-align: center;
		background: url(@/static/images/roundTurntable/bgc.png);
		background-size: 100% 100%;
	}

	.text {
		margin: 0 30rpx;
		margin-bottom: 100rpx;
		padding: 0 30rpx;
		min-height: 100vh;
		background: url(@/static/images/roundTurntable/text.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 100rpx;

		.title {
			width: 100%;
			height: 60rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.left {
				width: 200rpx;
				height: 1rpx;
				background-color: #999;
			}

			.right {
				width: 200rpx;
				height: 1rpx;
				background-color: #999;
			}

			.p {
				width: 150rpx;
				color: #fff;
			}
		}
	}

	.rightNav {
		position: fixed;
		top: 200rpx;
		right: 0;
		width: 142rpx;
		height: 54rpx;
		line-height: 54rpx;
		font-size: 28rpx;
		background-color: #FFD900;
		border-radius: 50rpx 0 0 50rpx;
	}

	.topTitle {

		line-height: 50rpx;
		font-size: 26rpx;
		font-weight: 400;

		margin: 0 auto;

		width: 484rpx;
		height: 60rpx;
		background: url(@/static/images/roundTurntable/topTitle.png);
		background-size: 100% 100%;

	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100upx;
	}

	.box {

		position: relative;

		width: 700upx;
		// height: 714upx;
		height: 830rpx;
		margin: 100rpx auto;
		margin-bottom: 0;
		background: url(@/static/images/roundTurntable/y.png) no-repeat;
		background-size: 100%;
		// background-color: #ff0;
		display: flex;
		align-items: center;
	}

	/* 转盘 */
	.canvas-container {
		margin: 0 auto;
		position: relative;
		width: 600upx;
		height: 718rpx;
		border-radius: 50%;

		// background: linear-gradient(145deg, #DAA951 0%, #EFCF8C 100%, #EFCF8C 100%);

		// box-shadow: 0 10upx 30upx #333, 0 0 10upx #000;  
		// border: 10rpx solid #A83FDB;  
	}

	.canvas-content {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		width: 600upx;
		height: 600upx;
		border-radius: inherit;
		background-clip: padding-box;
		/* background-color: #ffcb3f; */
	}

	.canvas-element {
		position: relative;
		z-index: 1;
		width: inherit;
		height: inherit;
		border-radius: 50%;
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
		font-weight: bold;
		text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6);
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 20upx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.canvas-item-text text {
		font-size: 30upx;
	}

	.canvas-item-text-img {
		width: 80rpx;
		height: 80rpx;
		padding-top: 30rpx;
	}

	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		left: 300upx;
		top: 0;
		width: 3upx;
		height: 300upx;
		background-color: #DAA951;
		overflow: hidden;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
	}

	/**  
* 抽奖按钮  
*/
	.canvas-btn {
		position: absolute;
		left: 260upx;
		top: 260upx;
		z-index: 400;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		color: #f4e9cc;
		background-color: #FBC73D;
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	.canvas-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 12upx;
		top: -44upx;

		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 30upx;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #FBC73D;
	}

	.canvas-btn.disabled {
		pointer-events: none;
		background: #B57D21;
		color: #ccc;
	}

	.canvas-btn.disabled::after {
		border-bottom-color: #B57D21;
	}

	.canvas-btn-table {
		color: #8F661A;
		width: 300rpx;
		text-align: center;
		position: absolute;
		left: 150rpx;
		bottom: 0rpx;
		font-size: 26rpx;
		opacity: 0.9;
	}

	.zz {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 9999;

		.popup {
			position: relative;
			// margin-top: 200rpx;
			border-radius: 20rpx;
			width: 500rpx;
			height: 600rpx;
			background: url(@/static/images/roundTurntable/popup.png);
			background-size: 100% 100%;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.img {
				width: 412rpx;
				height: 476rpx;
				margin: 0 auto;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.bottom {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 300rpx;
				background: url(@/static/images/roundTurntable/zz.png);
				background-size: 100% 100%;

				.title {
					margin-top: 80rpx;
					text-align: center;
					// line-height: 80rpx;
					// border-bottom: 1rpx solid #999;
				}

				.btn {
					position: absolute;
					bottom: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					text-align: center;
					line-height: 66rpx;

					.continue {
						width: 164rpx;
						height: 66rpx;
						color: #fff;
						background-color: #DAA951;
						border-radius: 50rpx;
					}

					.return {
						width: 164rpx;
						height: 66rpx;
						color: #DAA951;
						border: 1rpx solid #DAA951;
						border-radius: 50rpx;
					}
				}
			}

		}
	}
</style>
